<template>
  <div id="personal_order">
    <div class="info_title">
      <div
        class="order_tab_item"
        :class="menu == 0 ?'active':''"
        @click="showPage(0)"
      >待支付 {{orderList[0].length == 0?"":orderList[0].length}}</div>
      <div
        class="order_tab_item"
        :class="menu == 1 ?'active':''"
        @click="showPage(1)"
      >已支付 {{orderList[1].length == 0?"":orderList[1].length}}</div>
      <div
        class="order_tab_item"
        :class="menu == 2 ?'active':''"
        @click="showPage(2)"
      >已退款 {{orderList[2].length == 0?"":orderList[2].length}}</div>
      <div
        class="order_tab_item"
        :class="menu == 3 ?'active':''"
        @click="showPage(3)"
      >全部订单 {{orderList[3].length == 0?"":orderList[3].length}}</div>
    </div>
    <div class="order_tab_content" v-if="menu == 0">
      <div v-if="orderList[0].length>0">
        <div class="order_tab_content_item" v-for="item in orderList[0]" :key="item.orderSigupId">
          <div class="order_item_time">
            <span>{{item.createTime}}</span>
            <span style="margin-left:0.3rem;">订单号：{{item.orderSigupId}}</span>
          </div>
          <div class="line"></div>
          <div class="order_item_float">
            <div class="order_item_left">
              <div style="overflow: hidden;width:60%;float:left;">
                <div class="order_item_left_img" :style="{background:item.courseClassData[0].classPhoto}"></div>
                <div class="order_item_left_info">
                  <div
                    class="order_item_left_info_title"
                  >{{item.courseClassData[0].courseName}}</div>
                  <div
                    class="order_item_left_info_name"
                  >主讲教师：{{item.courseClassData[0].teacherUserName}}</div>
                </div>
              </div>
              <div class="order_item_left_class">
                <div style=" text-align: center;">
                  <div class="order_item_left_class_price">￥{{item.realMoney+item.earnestMoney}}</div>
                  <div style="margin-top:0.18rem;">课程单价</div>
                </div>
                <!-- <div style=" text-align: center;">
                <div class="order_item_left_class_price">1</div>
                <div style="margin-top:0.18rem;">购买数量</div>
                </div>-->
                <div style=" text-align: center;">
                  <div class="order_item_left_class_pay">￥{{item.realMoney+item.earnestMoney}}</div>
                  <div style="margin-top:0.18rem;">实际支付</div>
                </div>
              </div>
            </div>
            <div class="order_item_right">
              <div class="order_item_right_status">待支付</div>
              <div class="order_item_right_btn">
                <div class="order_item_right_btn_item_pay">支付</div>
                <div class="order_item_right_btn_item">取消订单</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="order_tab_content_noitem">暂无待支付订单</div>
    </div>
    <div class="order_tab_content" v-else-if="menu == 1">
      <div v-if="orderList[1].length>0">
        <div class="order_tab_content_item" v-for="item in orderList[1]" :key="item.orderSigupId">
          <div class="order_item_time">
            <span>{{item.createTime}}</span>
            <span style="margin-left:0.3rem;">订单号：{{item.orderSigupId}}</span>
          </div>
          <div class="line"></div>
          <div class="order_item_float">
            <div class="order_item_left">
              <div style="overflow: hidden;width:60%;float:left;">
                <div class="order_item_left_img" :style="{background:item.courseClassData[0].classPhoto}"></div>
                <div class="order_item_left_info">
                  <div
                    class="order_item_left_info_title"
                  >{{item.courseClassData[0].courseName}}</div>
                  <div
                    class="order_item_left_info_name"
                  >主讲教师：{{item.courseClassData[0].teacherUserName}}</div>
                </div>
              </div>
              <div class="order_item_left_class">
                <div style=" text-align: center;">
                  <div class="order_item_left_class_price">￥{{item.realMoney+item.earnestMoney}}</div>
                  <div style="margin-top:0.18rem;">课程单价</div>
                </div>
                <!-- <div style=" text-align: center;">
                <div class="order_item_left_class_price">1</div>
                <div style="margin-top:0.18rem;">购买数量</div>
                </div>-->
                <div style=" text-align: center;">
                  <div class="order_item_left_class_pay">￥{{item.realMoney+item.earnestMoney}}</div>
                  <div style="margin-top:0.18rem;">实际支付</div>
                </div>
              </div>
            </div>
            <div class="order_item_right">
              <div class="order_item_right_status" style="color:#34A169;">已支付</div>
              <div class="order_item_right_btn">
                <div class="order_item_right_btn_item">查看订单</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="order_tab_content_noitem">暂无已支付订单</div>
    </div>
    <div class="order_tab_content" v-else-if="menu == 2">
      <div v-if="orderList[2].length>0">
        <div class="order_tab_content_item" v-for="item in orderList[2]" :key="item.orderSigupId">
          <div class="order_item_time">
            <span>{{item.createTime}}</span>
            <span style="margin-left:0.3rem;">订单号：{{item.orderSigupId}}</span>
          </div>
          <div class="line"></div>
          <div class="order_item_float">
            <div class="order_item_left">
              <div style="overflow: hidden;width:60%;float:left;">
                <div class="order_item_left_img" :style="{background:item.courseClassData[0].classPhoto}"></div>
                <div class="order_item_left_info">
                  <div
                    class="order_item_left_info_title"
                  >{{item.courseClassData[0].courseName}}</div>
                  <div
                    class="order_item_left_info_name"
                  >主讲教师：{{item.courseClassData[0].teacherUserName}}</div>
                </div>
              </div>
              <div class="order_item_left_class">
                <div style=" text-align: center;">
                  <div class="order_item_left_class_price">￥{{item.realMoney+item.earnestMoney}}</div>
                  <div style="margin-top:0.18rem;">课程单价</div>
                </div>
                <!-- <div style=" text-align: center;">
                <div class="order_item_left_class_price">1</div>
                <div style="margin-top:0.18rem;">购买数量</div>
                </div>-->
                <div style=" text-align: center;">
                  <div class="order_item_left_class_pay">￥{{item.realMoney+item.earnestMoney}}</div>
                  <div style="margin-top:0.18rem;">实际支付</div>
                </div>
              </div>
            </div>
            <div class="order_item_right">
              <div class="order_item_right_status"  style="color:#666666;">已退款</div>
              <div class="order_item_right_btn">
                <div class="order_item_right_btn_item">查看订单</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="order_tab_content_noitem">暂无已退款订单</div>
    </div>
    <div class="order_tab_content" v-else>
      <div v-if="orderList[3].length>0">
        <div class="order_tab_content_item" v-for="item in orderList[3]" :key="item.orderSigupId">
          <div class="order_item_time">
            <span>{{item.createTime}}</span>
            <span style="margin-left:0.3rem;">订单号：{{item.orderSigupId}}</span>
          </div>
          <div class="line"></div>
          <div class="order_item_float">
            <div class="order_item_left">
              <div style="overflow: hidden;width:60%;float:left;">
                <div class="order_item_left_img" :style="{background:item.courseClassData[0].classPhoto}"></div>
                <div class="order_item_left_info">
                  <div
                    class="order_item_left_info_title"
                  >{{item.courseClassData[0].courseName}}</div>
                  <div
                    class="order_item_left_info_name"
                  >主讲教师：{{item.courseClassData[0].teacherUserName}}</div>
                </div>
              </div>
              <div class="order_item_left_class">
                <div style=" text-align: center;">
                  <div class="order_item_left_class_price">￥{{item.realMoney+item.earnestMoney}}</div>
                  <div style="margin-top:0.18rem;">课程单价</div>
                </div>
                <!-- <div style=" text-align: center;">
                <div class="order_item_left_class_price">1</div>
                <div style="margin-top:0.18rem;">购买数量</div>
                </div>-->
                <div style=" text-align: center;">
                  <div class="order_item_left_class_pay">￥{{item.realMoney+item.earnestMoney}}</div>
                  <div style="margin-top:0.18rem;">实际支付</div>
                </div>
              </div>
            </div>
            <div class="order_item_right">
              <div class="order_item_right_status" v-if="item.orderSignupState == 1">待支付</div>
               <div class="order_item_right_status"  style="color:#34A169;" v-else-if="item.orderSignupState == 2">已支付</div>
               <div class="order_item_right_status"  style="color:#666666;" v-else-if="item.orderSignupState == 3">已退款</div>
              <div class="order_item_right_btn">
                <div class="order_item_right_btn_item_pay" v-if="item.orderSignupState == 1">支付</div>
                <div class="order_item_right_btn_item">取消订单</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="order_tab_content_noitem">暂无订单信息</div>
    </div>
  </div>
</template>
<script>
let vm;
export default {
  data() {
    return {
      menu: 0,
      orderList: [[], [], [], []]
    };
  },
  methods: {
    showPage: function(val) {
      vm.menu = val;
      // vm.init(val);
    },
    init(val) {
      let paras = {
        currPage: 1,
        pageSize: 50,
        studentUserId: vm.$store.state.user.studentUserId,
        orderSignupState: val == 3 ? "" : val + 1
      };
      api.ordersignupList(paras).then(function(data) {
        if (data.resultCode == 2000) {
					data.list.forEach(item => {
            console.log(item.photo);
            if(item.courseClassData != null){
					  item.courseClassData[0].classPhoto =
					    item.courseClassData[0].classPhoto == null || item.courseClassData[0].classPhoto == ""
					      ? "url(" + require("../../assets/img/person/1.png") + ") no-repeat center top /1.48rem 0.86rem"
					      : "url(" +
					        item.courseClassData[0].classPhoto +
                  ") no-repeat center top /1.48rem 0.86rem";
            }else{
              item.courseClassData = [{classPhoto:"url(" + require("../../assets/img/person/1.png") + ") no-repeat center top /1.48rem 0.86rem"}];
            }
					});
          vm.$set(vm.orderList, val, data.list);
          console.log(vm.orderList);
        } else {
          tool.message({
            showClose: true,
            message: data.message,
            type: "warning"
          });
        }
      });
    }
  },
  created: function() {
    vm = this;
    vm.orderList.forEach(function(item, index) {
      vm.init(index);
    });
  }
};
</script>

<style lang="scss">
#personal_order {
  height: 100%;
  width: 100%;
  // margin-bottom: 0.2rem;
  .info_title {
    border-radius: 8px;
    background: #ffffff;
    font-size: 0.2rem;
    color: #999999;
    display: flex;
    align-items: center;
    text-align: center;
    .order_tab_item {
      margin: 0 0.3rem;
      padding-top: 0.2rem;
      height: 0.66rem;
      cursor: pointer;
    }
    .active {
      color: #333333;
      border-bottom: 2px solid #37a169;
    }
  }
  .order_tab_content {
    background: #f4f4f4;
    .order_tab_content_noitem {
      padding: 0.3rem 0.2rem;
      text-align: center;
      font-size: 0.16rem;
      color: #666666;
    }
    .order_tab_content_item {
      border-radius: 4px;
      margin-top: 0.12rem;
      font-size: 0.14rem;
      color: #666666;
      background: #ffffff;
      .order_item_time {
        height: 0.42rem;
        padding: 0.14rem 0 0 0.2rem;
      }
      .line {
        width: 100%;
        height: 1px;
        background: #eeeeee;
      }
      .order_item_float {
        width: 100%;
        overflow: hidden;
        .order_item_left {
          float: left;
          width: 7.2rem;
          height: 1.22rem;
          padding: 0.16rem 0.17rem;
          .order_item_left_img {
            border-radius: 2px;
            float: left;
            width: 1.48rem;
            height: 0.86rem;
          }
          .order_item_left_info {
            float: left;
            margin-left: 0.06rem;
            .order_item_left_info_title {
              height: 0.43rem;
              padding-top: 0.03rem;
              font-size: 0.18rem;
              color: #333333;
            }
            .order_item_left_info_name {
              height: 0.43rem;
              padding-top: 0.24rem;
            }
          }
          .order_item_left_class {
            float: right;
            display: flex;
            width: 35%;
            height: 0.86rem;
            justify-content: space-between;
            align-items: center;
            .order_item_left_class_price {
              font-size: 0.2rem;
              color: #333333;
            }
            .order_item_left_class_pay {
              font-size: 0.2rem;
              color: #37a169;
            }
          }
        }
        .order_item_right {
          float: right;
          width: 2.1rem;
          height: 1.22rem;
          padding: 0.35rem 0.18rem 0.2rem 0.18rem;
          border-left: 1px solid #eeeeee;
          .order_item_right_status {
            font-size: 0.16rem;
            color: #ff7901;
            width: 100%;
            height: 0.25rem;
            text-align: center;
          }
          .order_item_right_btn {
            height: 0.3rem;
            display: flex;
            margin-top: 0.12rem;
            width: 100%;
            justify-content: center;
            align-items: center;
            .order_item_right_btn_item_pay {
              width: 0.8rem;
              border-radius: 0.2rem;
              // border: 1px solid #ff7901;
              // color: #ff7901;
              border: 1px solid #999999;
              color: #999999;
              margin-right: 0.06rem;
              padding-top: 0.02rem;
              text-align: center;
              height: 0.26rem;
              cursor: pointer;
            }
            .order_item_right_btn_item {
              width: 0.8rem;
              border-radius: 0.2rem;
              // border: 1px solid #eeeeee;
              border: 1px solid #999999;
              color: #999999;
              padding-top: 0.02rem;
              text-align: center;
              height: 0.26rem;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>